<template>
  <basic-dialog
    fullscreen
    title="图文完善"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <div class="btn-header">
      <el-divider content-position="right">
        <el-button
          type="text"
          :loading="btnLoading.submit"
          @click="handleSave"
        >保存</el-button>
        <el-button
          v-if="showSubmitBtn"
          type="text"
          :loading="btnLoading.submit"
          @click="handleSubmit"
        >提交</el-button>
      </el-divider>
    </div>
    <ImageText
      ref="imageRef"
      v-loading="pageLoading"
      :data-source="dataSource"
      :rules="rules"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import ImageText from '@/pages/commodity/temporaryManage/components/ImageText';
import { COMMIT_TYPES_ENUMS } from '@/pages/commodity/temporaryManage/components/ImageText/constants';
import { PRODUCT_TYPES_ENUMS } from '@/constants/commodity';
import { isResponseSuccess } from '@/utils/bizUtils';
import {
  queryImageInfoService,
  saveOrSubmitImageInfoService
} from '@/api/public';
export default {
  components: {
    BasicDialog,
    ImageText
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    skuInfo: {
      type: Object,
      default: () => ({})
    },
    showSubmitBtn: {
      type: Boolean,
      default: true
    },
    rules: {
      type: Object,
      default: () => ({
        mainImageTrimming: { required: true, message: '商品主图片（精修）不能为空' },
        multiImageTrimming: { required: true, message: '商品多角度图（精修）不能为空' }
      })
    }
  },
  data () {
    return {
      dataSource: {},
      pageLoading: false,
      btnLoading: {
        submit: false
      }
    }
  },
  watch: {
    visible (val) {
      val && this.getHistoryImageInfo()
    }
  },
  methods: {
    // 保存
    handleSave () {
      const formData = this.$refs.imageRef?.formData ?? {}
      const checkNames = ['mainImage', 'mainImageTrimming', 'multiImage', 'multiImageTrimming'];
      const isEmpty = checkNames.every(prop => formData[prop].length === 0)
      if (isEmpty) return this.$message.warning('请至少上传1张精修或非精修图再进行保存')
      this.saveOrSubmitImageInfo(COMMIT_TYPES_ENUMS.Save)
    },
    // 提交
    handleSubmit () {
      this.$refs.imageRef.validateImgTextInfo(() => {
        this.saveOrSubmitImageInfo(COMMIT_TYPES_ENUMS.Submit)
      })
    },
    // 关闭
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 获取历史图片信息
    async getHistoryImageInfo () {
      const data = {
        skuId: this.skuInfo?.skuId ?? '',
        skuNo: this.skuInfo?.skuNo ?? ''
      }
      const loadingFn = state => { this.pageLoading = state }
      const res = await queryImageInfoService(data, loadingFn)
      this.dataSource = res?.retData ?? {}
    },
    // 提交或保存
    async saveOrSubmitImageInfo (saveOrSubmit) {
      const data = {
        skuId: this.skuInfo?.skuId,
        skuNo: this.skuInfo?.skuNo,
        saveOrSubmit,
        productType: PRODUCT_TYPES_ENUMS.POTENTIAL,
        ...(this.$refs?.imageRef.getImageInfo() ?? {})
      }
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await saveOrSubmitImageInfoService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('操作成功')
        this.handleClose()
        this.$emit('success')
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}
.btn-header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  top: 55px;
  right: 20px;
}
.image_wrap {
  padding-top: 100px;
}
</style>
